﻿<!DOCTYPE html>
<html>
<head>
    <title>表格选择器</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <link href="/Content/css/framework-font.css" rel="stylesheet" />
    <link href="/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <script src="/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="/Content/js/bootstrap/bootstrap.js"></script>

    <script src="base64.js"></script>
    <link href="btable.css" rel="stylesheet" />
    <script src="btable.js"></script>

    <script src="vue.js"></script>
    <style>
        .modal-header {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="content" style="padding: 10px;">
        <div class="pull-left toolbar">
            <button onclick="btnClear();" class="btn btn-default"><i class="fa fa-fw fa-trash"></i>清空</button>
            <button onclick="btnFinish();" class="btn btn-primary">确定<i class="fa fa-check-square fa-fw"></i></button>
            <button class="btn btn-primary" onclick="search('mTable');"><i class="fa fa-search fa-fw"></i>查询</button>
        </div>
        <table id="mTable">
        </table>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            appURL = '/TableAPI/search';
            tableParams = JSON.parse(sessionStorage.tableParams);
            if (tableParams.conditions && tableParams.conditions.whereStr) {
                tableParams.conditions.whereStr = Base64.encode(tableParams.conditions.whereStr);
            }
            $('#mTable').bootstrapTable({
                url: appURL, queryParams: 'btQueryParameters',
                columns: tableParams.tableColumns,
                sortName: tableParams.sort,
                sortOrder: tableParams.order,
                pageSize: tableParams.pageSize,
                searchPlaceholder: '按回车进行搜索...'
            });
        });

        function search(ID) {
            $('#' + ID + '').bootstrapTable('resetSearch', $('.search').children('input').val());
        }

        function btQueryParameters(params) {
            //TODO 加一个补充返回值，比如：ID(0)->NAME(无)
            params.tableName = tableParams.tableName;
            params.searchField = tableParams.searchField;
            params.conditions = tableParams.conditions;
            params.search = tableParams.search;

            if (!!tableParams.sql) {
                params.sql = Base64.encode(tableParams.sql);
            }
            console.log(params);
            return params;
        }

        function btnFinish() {
            var selections = $('#mTable').bootstrapTable('getSelections');
            fields = tableParams.fields;
            if (selections.length > 0) {
                var row = { ID: '', NAME: '' };
                row = $.extend(row, tableParams.otherKV);
                for (var i = 0; i < selections.length; i++) {
                    if (i == 0) {
                        row.ID = selections[i][fields.ID];
                        row.NAME = selections[i][fields.NAME];
                        for (let k in tableParams.otherKV) {
                            row[k] = selections[i][k];
                        }
                    } else {
                        row.ID += ',' + selections[i][fields.ID];
                        row.NAME += ',' + selections[i][fields.NAME];
                        for (let k in tableParams.otherKV) {
                            row[k] += ',' + selections[i][k];
                        }
                    }
                }
                setSelVal(row);
            }
            sessionStorage.selections = JSON.stringify(selections);
            parent.$('#tempSelectTableDiv').modal('hide');
        }

        function btnClear() {
            setSelVal({ ID: null, NAME: null });
            parent.$('#tempSelectTableDiv').modal('hide');
        }

        function setSelVal(row) {
            if (tableParams.rowIndex) {
                parent.app.m.content[tableParams.rowIndex][tableParams.mID] = row.ID;
                parent.app.m.content[tableParams.rowIndex][tableParams.mName] = row.NAME;
            } else if (parent.app && parent.app.m) {
                console.log('banding model[m].');
                var tempM = jQuery.extend(true, {}, parent.app.m);
                if (!tempM[tableParams.mID]) tempM[tableParams.mID] = '';
                if (!tempM[tableParams.mName]) tempM[tableParams.mName] = '';

                tempM[tableParams.mID] = row.ID;
                tempM[tableParams.mName] = row.NAME;
                for (let kk in tableParams.otherKV) {
                    var vv = tableParams.otherKV[kk];
                    tempM[vv] = row[kk];
                }
                parent.app.m = tempM;
            } else if (parent.app && parent.app.s) {
                console.log('banding model[s].');
                var tempM = jQuery.extend(true, {}, parent.app.s);
                if (!tempM[tableParams.mID]) tempM[tableParams.mID] = '';
                if (!tempM[tableParams.mName]) tempM[tableParams.mName] = '';

                tempM[tableParams.mID] = row.ID;
                tempM[tableParams.mName] = row.NAME;
                for (let kk in tableParams.otherKV) {
                    var vv = tableParams.otherKV[kk];
                    tempM[vv] = row[kk];
                }
                parent.app.s = tempM;
            } else if (parent.$('#' + tableParams.mID).length > 0 && parent.$('#' + tableParams.mName).length > 0) {
                parent.$('#' + tableParams.mID).val(row.ID);
                parent.$('#' + tableParams.mName).val(row.NAME);
                for (kk in tableParams.otherKV) {
                    var vv = tableParams.otherKV[kk];
                    parent.$('#' + vv).val(row[kk]);
                }
            } else {
                parent.$('#' + tableParams.mID).val(row.ID);
                parent.$('#' + tableParams.mName).val(row.NAME);
            }
        }
    </script>
</body>
</html>